ActiveReports 10
Viewing Reports
ActiveReports 10 > ActiveReports User Guide > Viewing Reports > HTML5 > Viewing Reports

Viewing Reports in HTML5 Viewer

The following steps describe how to view reports in HTML5 Viewer.

  1. Create a new Visual Studio Web Application project.
  2. Copy and place GrapeCity.ActiveReports.Viewer.Html.js, GrapeCity.ActiveReports.Viewer.Html.min.js and GrapeCity.ActiveReports.Viewer.Html.css files at a suitable location near the target HTML page.
    Note: In ActiveReports, these files are located in the C:\Program Files\GrapeCity\ActiveReports 10\Deployment\Html
  3. In the target HTML page, add the references to the GrapeCity.ActiveReports.Viewer.Html.css, GrapeCity.ActiveReports.Viewer.Html.js and its following dependencies:
    • jQuery 1.9.0 or higher
    • Bootstrap 3.0
    • Knockout.js 2.3.0 or higher
    Note: You can obtain the dependencies like jQuery from Content Delivery Network (CDN) or copy them locally.
    Paste inside the <head></head> tags
    Copy Code
    <link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" />    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"></script>
    <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
  4. Add the reference to the bootstrap.min.css in the target HTML page.
    Paste inside the <head></head> tags
    Copy Code
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    
  5. In the target HTML page, add the DIV element that will contain the HTML5 Viewer.
    Paste inside the <body></body> tags
    Copy Code
    <div id="viewer" style="width:800px;height:600px;"></div>
    
  6. From the Project menu, select Add New Item.
  7. Open the licenses.licx file, and add the following references to it.
    Paste inside the licenses.licx file
    Copy Code
    GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
    GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
    GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
    GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
  8. In the Add New Item dialog that appears, select ActiveReports 10 Web Service and click Add. The ActiveReports 10 Web Service is required for the proper functioning of the HTML5 Viewer.
  9. Add an ActiveReport to the Visual Studio project. See Adding an ActiveReport to a Project for information on adding different report layouts.
  10. Add the following code to view your report in the HTML5 Viewer. The code might vary depending on the technology that you use to develop the HTML5 Viewer component.
    Paste inside the <script></script> tags
    Copy Code
    $(function ()
    {
       var viewer = GrapeCity.ActiveReports.Viewer(
       {
          element: '#viewer',
          report: {
             id: "PageReport.rdlx"
    
          },
          reportService: {
             url: '/ActiveReports.ReportService.asmx'
          },
          uiType: 'desktop'
          
       });
    });
    
  11. Press F5 to run the project.

Viewing reports from different domains using CORS

Cross-Origin Resource Sharing is a technology for the web that provides async web operations to directly access reports from different domains. CORS works by adding a special header to responses from a server to the client. If a response contains the Access-Control-Allow-Origin header, then you can directly access the reports from another domain. If you get error 404 or 500 on the report preview, please make sure that your browser supports CORS.

The following steps describe how to access reports from different domain using CORS.

  1. Add Global Application Class file (Global.asax) in your application on the service side.
  2. Open the Global.asax.cs file, and add the following code to access reports using cross websites.
    Paste inside the Global.asax.cs
    Copy Code
     protected void Application_BeginRequest(object sender, EventArgs e)
         {
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
           if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
             {
               HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
               HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
               HttpContext.Current.Response.End();
             }
    
    Paste inside the Global.asax.vb
    Copy Code
    Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*")
            If HttpContext.Current.Request.HttpMethod = "OPTIONS" Then
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept")
                HttpContext.Current.Response.End()
            End If
        End Sub
    

    Note: In case of Internet Explorer 9, you need to add $.support.cors = true; code on the client side while initializing the HTML5 Viewer to access reports from a different domain.

See Also

Getting Started